<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
              placeholder="请输入商品名称"
              class="input-with-select"
              v-model="queryInfo.name"
              clearable
              @clear="getBmhBatchList"
          >
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" @click="getBmhBatchList">搜索</el-button>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="showEditDialog('')">添加</el-button>
        </el-col>

      </el-row>
      <el-table :data="bmhList" border stripe>
        <el-table-column label="封面">
          <template slot-scope="sc">
            <img
                :src="sc.row.logo"
                slot="reference"
                width="80"
                height="120"
            />
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="院线" prop="lineName"></el-table-column>
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="总库存" prop="quantity"></el-table-column>
        <el-table-column label="已售数量" prop="sold"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch  v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
                        active-value="Y" inactive-value="N" @change="updateStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="券码">
          <template slot-scope="scope">
            <router-link :to="{path:'/cinema/bmh/coupon/list',query:{cinemaBmhBatchId:scope.row.id}}">券管理</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[5, 10, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    
    <el-dialog title="修改商品" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="院线" prop="batchId">
          <el-select v-model="selLineIdList" filterable  size="small" multiple clearable placeholder="请选择院线">
            <el-option
                v-for="item in gplineList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="editForm.name" style="width: 60%;"></el-input>
        </el-form-item>
        <el-form-item label="售价" prop="price">
          <el-input v-model="editForm.price" style="width: 90px"></el-input>
        </el-form-item>
         <el-form-item label="套餐明细" prop="rate">
          <el-input v-model="editForm.itemDesc" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="Logo">
          <el-upload
              action="/houtai/uploadImg"
              list-type="picture-card"
              :drag="true"
              :on-preview="handlePictureCardPreview"
              :on-success="handleImgSuccess"
              :show-file-list="true"
              :file-list="uploadList"
              :on-remove="handleRemove"
              :limit="maxUploadNum">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="60%" height="60%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editBmhBatch">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/Movie.js'
import Util from '@/libs/utils'
export default {
  data() {
    return {
      queryInfo: {
        pageNo: 1,
        pageSize: 20,
        name:''
      },
      bmhList: [],
      gplineList: [],
      total: 0,
      addDialogVisible: false,
      addForm: {},
      editDialogVisible: false,
      dialogVisible: false,
      editForm: {},
      editFormRules: {},
      dialogImageUrl: '',
      maxUploadNum:1,
      uploadList: [],
      selLineIdList:[]
    }
  },
  created() {
    this.getGplineList();
    this.getBmhBatchList();
  },
  methods: {
    showBmhBatch() {
      this.editDialogVisible = true;
    },
    getGplineList() {
      Api.getCinemaGplineList(this.queryInfo).then(res => {
        if (res.success) {
          this.gplineList = res.data;
        } else {
          return this.$message.error('获取数据失败')
        }
      })
    },
    getBmhBatchList() {
        Api.getBmhBatchList(this.queryInfo).then(res => {
            if (res.success) {
                this.bmhList = res.data.records;
            } else {
                return this.$message.error('获取数据失败')
            }
        })
    },
    async showEditDialog(id) {
      Api.getBmhBatch({'id':id}).then(res => {
            if (res.success) {
              this.editForm = res.data
              if(this.editForm.lineId){
                var tmps = this.editForm.lineId.split(',');
                var tIds=[];
                tmps.forEach(function(e){
                  tIds.push(parseInt(e));
                });
                this.selLineIdList = tIds;
              }else {
                this.selLineIdList = [];
              }
              this.uploadList=[];
              if(this.editForm.logo){
                this.uploadList.push({'url':this.editForm.logo});
              }
              this.editDialogVisible = true
            } else {
              return this.$message.error('查询失败')
            }
        })
    },
    // 修改
    editBmhBatch() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        this.editForm.lineIds = this.selLineIdList.join(',');
        Api.saveBmhBatch(this.editForm).then(res => {
            if (res.success) {
              this.editDialogVisible = false
              this.getBmhBatchList()
              this.$message.success('修改成功！')
            } else {
                return this.$message.error('修改失败: ' + res.msg)
            }
        })
      })
    },
    updateStatus(obj) {
      Api.setBmhBatchStatus({'id':obj.id, 'status':obj.status}).then(res => {
        if (res.success) {
          this.$message.success('更新状态成功！')
        } else {
          return this.$message.error('更新状态失败！')
        }
      })
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      this.getBmhBatchList()
    },
    handleCurrentChange(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.getBmhBatchList()
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    handleRemove(file, fileList) {
      console.log(file.url);
      var newUploadList = [];
      this.uploadList.forEach(function (v, index) {
        if(file.url!=v.url){
          newUploadList.push(v);
        }
      });
      this.uploadList = newUploadList;
      this.showUploadList();
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleImgSuccess(res, file) {
      this.uploadList.push(res.data);
      this.showUploadList();
    },
    showUploadList(){
      var tm = [];
      this.uploadList.forEach(function (v, index) {
        console.warn(v.url,index);
        tm.push(v.url);
      });
      if(tm.length>0){
        this.editForm.logo = tm.join(',');
      }else {
        this.editForm.logo = '';
      }
    }
  },
}
</script>

<style lang="less" scoped>
</style>
